<template>
  <div class="sub-icon-wrap" @click="onFieldChenge(field)">
    <div class="icon" :style="{backgroundColor: field.bgColor}">
      <span class="iconfont" :class="field.icon"></span>
    </div>
    <p class="icon-text">{{field.iconText}}</p>
  </div>
</template>

<script>
  import {
    mapMutations
  } from 'vuex';

  export default {
    name: 'IconsSub',
    props: {
      field: Object
    },
    methods: {
      ...mapMutations(['selectField']),
      onFieldChenge(field) {
        this.selectField(field.field);
        this.$router.push('/list');
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  @import '~styles/mixins.scss';
  @import '~styles/variables.scss';

  .sub-icon-wrap {
    @include flex-column;
    @include vh-center;

    .icon {
      @include flex-column;
      @include vh-center;
      width: .4rem;
      height: .4rem;
      border-radius: 50%;

      .iconfont {
        color: #FFFFFF;
        font-size: .34rem;
      }
    }

    .icon-text {
      font-size: .12rem;
      margin-top: .1rem;
    }
  }
</style>
